<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>预约项目管理</title>
  <th:block th:include="common/pub_head :: default"></th:block>
  <th:block th:include="common/pub_head :: layui"></th:block>

  <style>
    .active {
      color: blue;
      cursor: pointer;
    }
  </style>
</head>
<body>
<form class="layui-form layui-form-pane" id="list_form">
  <fieldset class="layui-elem-field layui-field-title">
    <legend>预约项目管理</legend>
  </fieldset>
  <div class="layui-form-item">
    <div class="layui-inline">
      <label class="layui-form-label" style="width: 150px">预约项目名称</label>
      <div class="layui-input-inline">
        <input type="text" name="name" id="name" autocomplete="off" class="layui-input"
               placeholder="请输入项目名称">
      </div>
    </div>
    <div class="layui-inline">
      <button type="button" class="layui-btn" onclick="listAppointmentItemByParams()">查询</button>
      <button type="button" class="layui-btn layui-btn-primary" onclick="resetForm()">重置</button>
    </div>
  </div>
</form>
<table class="layui-table" lay-filter="table" id='table'></table>
<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" type="button" onclick="addAppointmentItem()">新增</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchDel">批量删除</button>
  </div>
</script>
<!--表格操作-->
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
  /*<![CDATA[*/
  function addAppointmentItem() {
    var URL = path + "/appointment/item/addOrEditAppointmentItem";

    layer.open({
      title: "新增预约项目",
      type: 2,
      area: ['700px', '150px'],
      content: URL
    });
  }
  /*]]>*/
</script>
<script>
  /*<![CDATA[*/
  var table;
  var form;
  layui.use(['table', 'form'], function () {
    table = layui.table;
    form = layui.form;

    table.render({
      elem: '#table',
      id: 'table',
      toolbar: '#toolbarDemo',
      url: path + '/appointment/item/listAppointmentItemByParams',
      cols: [
        [
          {type: 'checkbox', field: "id"},
          {field: 'name', title: '预约项目名称', width: 200},
          {field: 'orderNum', title: '排序', align: 'center', width: 60},
          {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 130}
        ]
      ],
      limit: 10,
      request: {
        pageName: 'pn',
        limitName: 'pageSize' //每页数据量的参数名，默认：limit
      },
      page: true
    });

    table.on('toolbar(table)', function (obj) {
      var checkStatus = table.checkStatus(obj.config.id);
      switch (obj.event) {
        case 'batchDel':
          var data = checkStatus.data;
          var selectId = [];
          $.each(data, function (index, domEle) {
            selectId.push(domEle.id);
          });
          if (selectId.length == 0) {
            layer.alert("请先选择数据");

            return;
          }
          batchDelAppointmentItem(selectId + "");
          break;
      }
    });

    function batchDelAppointmentItem(idList) {
      var URL = path + "/appointment/item/batchDelAppointmentItem";
      var formData = {
        "idList": idList
      };

      layer.confirm("确定要删除数据吗?", function () {
        $.post(URL, formData, function (jsonData) {
          if (jsonData.flag) {
            layer.msg("删除成功", {icon: 1});
            listAppointmentItemByParams();
          } else {
            console.log(jsonData.errorMsg);
            layer.msg("删除失败", {icon: 2});
          }
        }, "json");
      });
    }

    table.on('tool(table)', function (obj) {
      var data = obj.data;
      var selectId = [data.id];
      if (obj.event === 'del') {
        batchDelAppointmentItem(selectId + "");
      } else if (obj.event === 'edit') {
        var URL = path + "/appointment/item/addOrEditAppointmentItem?id=" + data.id;

        layer.open({
          title: "修改预约项目",
          type: 2,
          area: ['700px', '260px'],
          content: URL
        });
      }
    });
  });

  document.onkeydown = EnterLogin;

  function EnterLogin(event) {
    if (event.keyCode == 13) {
      listAppointmentItemByParams();
    }
  }

  function listAppointmentItemByParams() {
    layer.closeAll();
    table.reload('table', {
      page: {
        curr: 1 //重新从第 1 页开始
      }
      , where: {
        name: $("#name").val()
      }
    });
  }

  function resetForm() {
    $('#list_form')[0].reset();
  }

  /*]]>*/
</script>
</body>
</html>